<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="
        min-height: 500px;
        overflow-y: auto;
        text-align: left;
        max-height: 600px;
      "
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
      @onChange="handleChange"
    />
  </div>
</template>
<script setup lang="ts">
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import {
  onBeforeUnmount,
  ref,
  shallowRef,
  onMounted,
  nextTick,
  watch,
} from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { baseURL } from "@/util/request";
// 初始值
const props = defineProps({
  initValue: String,
  isDisabled: Boolean,
});
const emits = defineEmits(["getEditorContent"]);
// const emits = defineEmits([''])
let mode = ref("default");
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();
// 内容 HTML
const valueHtml = ref("");
// 模拟 ajax 异步获取内容
onMounted(() => {
  nextTick(() => {
    // 界面节点更新完以后再修改值。
    valueHtml.value = props.initValue;
    console.log(props.isDisabled);
    if (props.isDisabled) {
      editorRef.value.disable();
    }
  });
});
// 工具栏配置
const toolbarConfig = {
  toolbarKeys: [
    // 菜单 key
    "headerSelect",
    "bold", // 加粗
    "italic", // 斜体
    "through", // 删除线
    "underline", // 下划线
    "bulletedList", // 无序列表
    "numberedList", // 有序列表
    "color", // 文字颜色
    "insertLink", // 插入链接
    "fontSize", // 字体大小
    "lineHeight", // 行高
    "uploadImage", // 上传图片
    "uploadVideo", // 上传视频
    "delIndent", // 缩进
    "indent", // 增进
    "deleteImage", //删除图片
    "divider", // 分割线
    "insertTable", // 插入表格
    "justifyCenter", // 居中对齐
    "justifyJustify", // 两端对齐
    "justifyLeft", // 左对齐
    "justifyRight", // 右对齐
    "undo", // 撤销
    "redo", // 重做
    "clearStyle", // 清除格式
  ],
};
const editorConfig = {
  placeholder: "请输入内容...", // 配置默认提示
  // readOnly: true
  MENU_CONF: {
    // 配置上传服务器地址
    uploadImage: {
      fieldName: "file",
      server: baseURL + "/manage/v1/storage/upload?dir=edit",
      base64LimitSize: 5 * 1024,
      allowedFileTypes: ["image/*"],
      /* meta: {
        token: localStorage.getItem("x-auth-token"),
      },*/
      // 单个文件上传成功之后
      onSuccess(file: File, res: any) {
        console.log(`${file.name} 上传成功`, res);
      },
      headers: {
        Accept: "*/*",
        otherKey: "xxx",
        "X-Auth-Token": localStorage.getItem("x-auth-token"),
      },
      customInsert(res: { data: any }, insertFn: (arg0: any) => void) {
        insertFn(baseURL + res.data.fileUrl); //插入图片
      },
    },
    uploadVideo: {
      fieldName: "file",
      server: baseURL + "/manage/v1/storage/upload?dir=edit",
      // 单个文件的最大体积限制，默认为 1G
      maxFileSize: 1024 * 1024 * 1024, // 1G
      /*meta: {
        'X-Auth-Token': localStorage.getItem("x-auth-token"),
      },*/
      // 最多可上传几个文件，默认为 5
      maxNumberOfFiles: 3,

      allowedFileTypes: ["video/!*"],

      // 将 meta 拼接到 url 参数中，默认 false
      metaWithUrl: false,

      headers: {
        Accept: "*/*",
        otherKey: "xxx",
        "X-Auth-Token": localStorage.getItem("x-auth-token"),
      },

      // 跨域是否传递 cookie ，默认为 false
      withCredentials: true,

      // 超时时间，默认为 30 秒
      timeout: 30 * 1000, // 30 秒
      onBeforeUpload(file) {
        return file;
      },

      // 单个文件上传成功之后
      onSuccess(file: File, res: any) {
        console.log(`${file.name} 上传成功`, res);
      },
      customInsert(res: { data: any }, insertFn: (arg0: any) => void) {
        insertFn(baseURL + res.data.fileUrl); //插入视频
      },
    },
  },
};
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

const handleCreated = (editor) => {
  editorRef.value = editor; // 创建富文本编辑器
};
const handleChange = (info) => {
  // info.children 数组包含了数据类型和内容，valueHtml.value内容的html格式
  emits("getEditorContent", info.children, valueHtml.value);
};
watch(
  () => props.initValue,
  (value) => {
    // 父组件获取初始值
    valueHtml.value = value;
  },
);
</script>
<style scoped lang="scss">
.w-e-textarea-video-container {
  width: 100px;
  height: 400px;
}
</style>
